<template>
  <div id="my">
    <div class="my-body">
      <!-- 头部 -->
      <div class="header">
        <div class="tools"></div>
        <div class="detail">
          <div class="name-linel">{{ userStore.isLoggedIn ? userStore.userEmail : '未登录' }}</div>
          <div class="box">
            <div class="avatar" @click="goToProfile">
              <div style="width: 65rem; height: 65rem; border-radius: 50%; background-color: #fff">
                <div class="avatar-user">
                  <img
                    style="border-radius: 50%;"
                    v-if="userStore.isLoggedIn"
                    src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/operation/2023/02/20/4375ac4c2fc54772a7e811b93c50239av6uioaz0y6.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="https://mall.leyifan.com/static/h5/new_images/user_nologin_avater.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="left" @click="gotoLogin()">
              <div class="text">
                <span>{{ userStore.isLoggedIn ? userStore.userId : '请点击登录' }}</span>
              </div>
            </div>
            <div class="list">
              <li>
                <p class="price-oppo">
                  <span>0</span>
                </p>
                <p class="label">
                  <span>余额（日元）</span>
                </p>
              </li>
              <li>
                <p class="price-oppo">
                  <span>0</span>
                </p>
                <p class="label">
                  <span>积分</span>
                </p>
              </li>
              <li @click="gotoCouponicon">
                <p class="price-oppo">
                  <span>0</span>
                </p>
                <p class="label">
                  <span>优惠卷</span>
                </p>
              </li>
              <li @click="gotocollect()">
                <p class="price-oppo">
                  <span>{{Object.keys(collections).length}}</span>
                </p>
                <p class="label">
                  <span>收藏</span>
                </p>
              </li>
            </div>
          </div>
        </div>
      </div>
      <!-- 订单中心 -->
      <div class="order" @click="gotoOrder()">
        <div class="title">
          <li class="text">
            <span>订单中心</span>
          </li>
          <li class="view">
            <div class="text">
              <span class="h1">查看全部</span>
            </div>
            <div class="image">
              <div></div>
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
        </div>
        <div class="list">
          <li class="item">
            <div class="badge-item">
              <div class="badge-svg">
                <img src="https://mall.leyifan.com/static/h5/new_images/order_1.png" alt="" />
              </div>
            </div>
            <div class="text">
              <span>待支付</span>
            </div>
          </li>
          <li class="item">
            <div class="badge-item">
              <div class="badge-svg">
                <img src="https://mall.leyifan.com/static/h5/new_images/order_2.png" alt="" />
              </div>
            </div>
            <div class="text">
              <span>已支付</span>
            </div>
          </li>
          <li class="item">
            <div class="badge-item">
              <div class="badge-svg">
                <img src="https://mall.leyifan.com/static/h5/new_images/order_3.png" alt="" />
              </div>
            </div>
            <div class="text">
              <span>已到仓</span>
            </div>
          </li>
          <li class="item">
            <div class="badge-item">
              <div class="badge-svg">
                <img src="https://mall.leyifan.com/static/h5/new_images/order_4.png" alt="" />
              </div>
            </div>
            <div class="text">
              <span>待收货</span>
            </div>
          </li>
          <li class="item">
            <div class="badge-item">
              <div class="badge-svg">
                <img src="https://mall.leyifan.com/static/h5/new_images/order_5.png" alt="" />
              </div>
            </div>
            <div class="text">
              <span>售后/退款</span>
            </div>
          </li>
        </div>
      </div>
      <!-- 代拍中心 -->
      <div class="proxy-auction" @click="gotoProxy()">
        <div class="title">
          <li class="text">
            <span>代拍中心</span>
          </li>
          <li class="view">
            <div class="text">
              <span class="h1">查看全部</span>
            </div>
            <div class="image">
              <div></div>
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
        </div>
        <div class="list">
          <li class="item">
            <div class="badge-item">
              <div class="badge-svg">
                <img src="https://mall.leyifan.com/static/h5/new_images/jp_1.png" alt="" />
              </div>
            </div>
            <div class="text">
              <span>竞拍中</span>
            </div>
          </li>
          <li class="item">
            <div class="badge-item">
              <div class="badge-svg">
                <img src="https://mall.leyifan.com/static/h5/new_images/jp_2.png" alt="" />
              </div>
            </div>
            <div class="text">
              <span>已得标</span>
            </div>
          </li>
          <li class="item">
            <div class="badge-item">
              <div class="badge-svg">
                <img src="https://mall.leyifan.com/static/h5/new_images/jp_3.png" alt="" />
              </div>
            </div>
            <div class="text">
              <span>未得标</span>
            </div>
          </li>
          <li class="item">
            <div class="badge-item">
              <div class="badge-svg">
                <img src="https://mall.leyifan.com/static/h5/new_images/jp_4.png" alt="" />
              </div>
            </div>
            <div class="text">
              <span>取消/退款</span>
            </div>
          </li>
        </div>
      </div>
      <!-- 联系客服 -->
      <div class="customer-service" v-if="!userStore.isLoggedIn">
        <div class="menu-item" @click="gotokefu()">
          <div class="left">
            <img src="https://mall.leyifan.com/static/h5/new_images/customer.png" alt="" />
            <div class="text">
              <span>联系客服</span>
            </div>
          </div>
          <div class="right">
            <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 功能 -->
      <div class="menu-list" v-else>
        <ul>
          <li @click="gotoYouxiang">
            <div class="left">
              <div class="img">
                <img
                  src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/31/98f326f8a62f4985a739eb62a3d6ae2bec5jwncq9n.png"
                  alt=""
                />
              </div>
              <div class="text">
                <span>悠享购</span>
              </div>
            </div>
            <div class="image">
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
          <li>
            <div class="left">
              <div class="img">
                <img
                  src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/16/111d6026d4b7409cb2ece6da0d0d68ebr1puokofmc.png"
                  alt=""
                />
              </div>
              <div class="text">
                <span>会员中心</span>
              </div>
            </div>
            <div class="image">
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
          <li>
            <div class="left">
              <div class="img">
                <img
                  src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/16/210e1d14da7e406faa31b3611ef51e41f02k5yv640.png"
                  alt=""
                />
              </div>
              <div class="text">
                <span>我的留言</span>
              </div>
            </div>
            <div class="image">
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
          <li @click="gotocollect()">
            <div class="left">
              <div class="img">
                <img
                  src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/16/6b85b7ada8aa45ffb17315bf97ad8825vjncmqyd2u.png"
                  alt=""
                />
              </div>
              <div class="text">
                <span>我的收藏</span>
              </div>
            </div>
            <div class="image">
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
          <li @click="gotoaddresslist()">
            <div class="left">
              <div class="img">
                <img
                  src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/16/2baf4d4ca5ba43a080642cfba94ce701b9rqs6bvi7.png"
                  alt=""
                />
              </div>
              <div class="text">
                <span>我的地址</span>
              </div>
            </div>
            <div class="image">
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
          <li>
            <div class="left">
              <div class="img">
                <img
                  src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/16/6cbe01b4425c4c79b5c652cf9adc8a9c2it8ewnzpb.png"
                  alt=""
                />
              </div>
              <div class="text">
                <span>使用说明</span>
              </div>
            </div>
            <div class="image">
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
          <li>
            <div class="left">
              <div class="img">
                <img
                  src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/16/917a98f6c4f04a219f4e8ce7bd36df7cxx2ob9nspu.png"
                  alt=""
                />
              </div>
              <div class="text">
                <span>联系客服</span>
              </div>
            </div>
            <div class="image">
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
          <li>
            <div class="left">
              <div class="img">
                <img
                  src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/16/f0a8d4ce73ec4dc5921cc962ba4efa18azpiurq9zi.png"
                  alt=""
                />
              </div>
              <div class="text">
                <span>乐一番转运</span>
              </div>
            </div>
            <div class="image">
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
          <li>
            <div class="left">
              <div class="img">
                <img
                  src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/10/16/e0c782c4af784945ae6bca221671c3384lvzsu4cng.png"
                  alt=""
                />
              </div>
              <div class="text">
                <span>投诉与建议</span>
              </div>
            </div>
            <div class="image">
              <img src="https://mall.leyifan.com/static/h5/new_images/user_icon_right.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/useUserStore'
import axios from 'axios'
import { ref } from 'vue'
const router = useRouter()
const userStore = useUserStore()
let fenleilist = ref([])
const gotoaddresslist = () => {
  router.push('/addresslist')
}
const gotoProxy = () => {
  router.push({ name: 'hlfdaily' })
}
let collections =ref({})
collections.value = JSON.parse(localStorage.getItem('collections') || '{}')

const gotocollect = () => {
  if (!localStorage.getItem('users')) {
    router.push('/login')
  } else {
    router.push('/mycollect')
  }
}
const goToProfile = () => {
  router.push('/personal')
}
const gotoLogin = () => {
  router.push('/login')
}
const gotoCouponicon = () => {
  router.push('/trick')
}
const gotoYouxiang = () => {
  router.push({path:'/hlfqueryr' ,query: { value: 'SELFSTORE' }} )
}
const gotoOrder = () => {
  if (!localStorage.getItem('users')) {
    router.push('/login')
  } else {
    router.push('/myorder')
  }
}


</script>

<style lang="less" scoped>
#my {
  width: 100%;
  .my-body {
    background-image: url(https://mall.leyifan.com/static/h5/new_images/common_bg.png);
    background-size: contain;
    background-color: #fff;
    background-size: 100% 250rem;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding: 0;
    font-family: PingFangSC;
    padding-bottom: calc(49rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    .header {
      width: 100%;
      height: 190rem;
      .tools {
        height: 40rem;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: flex-end;
      }
      .detail {
        .name-linel {
          font-size: 16rem;
          line-height: normal;
          font-weight: 700;
          padding-left: 101rem;
          vertical-align: middle;
        }
        .box {
          margin-top: 6rem;
          position: relative;
          padding: 10rem;
          padding-top: 0;
          box-sizing: border-box;
          background: linear-gradient(180deg, #f5f3f3, #f8f6f6);
          border-radius: 8rem;
          .avatar {
            position: absolute;
            left: 20rem;
            top: -34rem;
            .avatar-user {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background-position: 0% 0%;
              background-size: 100% 100%;
              background-repeat: no-repeat;
            }
          }
        }
        .left {
          padding: 10rem 0;
          margin-left: 91rem;
          display: flex;
          .text {
            display: inline-flex;
            align-items: center;
            -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
            font-size: 12rem;
            height: 19rem;
            font-weight: 400;
            background-color: #333333;
            padding: 0 12rem;
            border-radius: 10rem;
            span {
              color: #fff;
            }
          }
        }
        .list {
          background-color: #fff;
          display: flex;
          align-items: center;
          height: 75rem;
          justify-content: space-around;
          border-radius: 8rem;
          li {
            list-style: none;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            border-right: 1rem solid #f5f3f3;
            .price-oppo {
              font-weight: 700;
              font-size: 15rem;
            }
            .label {
              font-size: 10rem;
              line-height: 10rem;
              margin-top: 10rem;
              border: none;
            }
          }
        }
      }
    }
    .order {
      margin-top: 14rem;
      width: 347rem;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text {
          list-style: none;
          line-height: 14rem;
          font-size: 15rem;
          font-weight: 700;
        }
        .view {
          list-style: none;
          font-size: 13rem;
          color: #999;
          font-weight: 400;
          display: flex;
          align-items: center;
          .h1 {
            font-size: 12rem;
          }
          .image {
            width: 10rem;
            height: 10rem;
            margin-left: 2rem;
            background-image: url(https://mall.leyifan.com/static/h5/new_images/user_icon_right.png);
            background-position: 0% 0%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            span {
              font-size: 12rem;
            }
          }
          img {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }
      }
      .list {
        height: 100rem;
        display: flex;
        justify-content: space-between;
        width: 100%;
        background: linear-gradient(rgba(255, 38, 70, 0.2), #fff);
        border-radius: 8rem 8rem 0 0;
        margin-top: 10rem;
        padding: 20rem 20rem 0;
        .item {
          list-style: none;
          display: flex;
          flex-direction: column;
          justify-items: center;
          align-items: center;
          .badge-item {
            position: relative;
            width: 31rem;
            height: 31rem;
          }
          .text {
            font-size: 10rem;
            line-height: 10rem;
            margin-top: 6rem;
          }
        }
      }
    }
    .proxy-auction {
      margin-top: 14rem;
      width: 347rem;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text {
          list-style: none;
          line-height: 14rem;
          font-size: 15rem;
          font-weight: 700;
        }
        .view {
          list-style: none;
          font-size: 13rem;
          color: #999;
          font-weight: 400;
          display: flex;
          align-items: center;
          .h1 {
            font-size: 12rem;
          }
          .image {
            width: 10rem;
            height: 10rem;
            margin-left: 2rem;
            background-image: url(https://mall.leyifan.com/static/h5/new_images/user_icon_right.png);
            background-position: 0% 0%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            span {
              font-size: 12rem;
            }
          }
          img {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }
      }
      .list {
        height: 100rem;
        display: flex;
        justify-content: space-between;
        width: 100%;
        background: linear-gradient(rgba(255, 209, 0, 0.3), #fff);
        border-radius: 8rem 8rem 0 0;
        margin-top: 10rem;
        padding: 20rem 20rem 0;
        .item {
          list-style: none;
          display: flex;
          flex-direction: column;
          justify-items: center;
          align-items: center;
          .badge-item {
            position: relative;
            width: 31rem;
            height: 31rem;
          }
          .text {
            font-size: 10rem;
            line-height: 10rem;
            margin-top: 6rem;
          }
        }
      }
    }
    .customer-service {
      display: flex;
      margin-top: 14rem;
      flex-direction: column;
      width: 375rem;
      .menu-item {
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        padding: 0 14rem;
        height: 52rem;
        .left {
          display: flex;
          align-items: center;
          img {
            width: 24rem;
            height: 24rem;
            margin-right: 10rem;
          }
          .text {
            font-size: 13rem;
            color: #333;
            -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
          }
        }
        .right {
          line-height: 52rem;
          img {
            width: 10rem;
            height: 10rem;
          }
        }
      }
    }
    .menu-list {
      display: flex;
      margin-top: 14rem;
      flex-direction: column;
      width: 100%;
      ul {
        width: 100%;
        li {
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          font-size: 13rem;
          height: 52rem;
          border-bottom: 1rem solid #f5f5f5;
          transition: background-color 0.2s ease-in-out;
          padding: 0 14rem;
          .left {
            display: flex;
            align-items: center;
            .img {
              width: 24rem;
              height: 24rem;
              margin-right: 10rem;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .text {
              font-size: 13rem;
              color: #333;
              -webkit-transform: translateY(1rem);
              transform: translateY(1rem);
            }
          }
          .image {
            width: 8rem;
            height: 8rem;
            img {
              margin-bottom: 10rem;
            }
          }
        }
      }
    }
  }
}
</style>